<template>
        <div>
                <div class="topa">
                        <input type="text"
                               placeholder="输入商家，商品名称"
                               @click="search()">
                </div>
                <div class="topb">
                        <van-swipe class="my-swipe"
                                   :autoplay="3000"
                                   indicator-color="white">
                                <van-swipe-item v-for="(item,index) in bannerlist"
                                                :key="index"><img :src="item.bannerUrl"></van-swipe-item>

                        </van-swipe>
                </div>

                <div class="top4">
                        <span v-for="(item,index) in list1"
                              :key="index">{{item}}</span>

                </div>
                <div class="topc">
                        <div class="top3"
                             @click="todetail(item)"
                             v-for="(item,index) in shoplist"
                             :key="index">
                                <div class="top1">
                                        <img :src="item.picUrl"
                                             alt="">

                                </div>
                                <div class="top2">
                                        <p>{{item.name}}</p>
                                        <p>{{item.monthSalesTip}}</p>
                                        <p>距您默认地址{{item.deliveryTimeTip}}米</p>
                                        <p>{{item.averagePriceTip}}</p>

                                </div>
                        </div>

                </div>
        </div>

</template>

<script>
import { banner_list, shop_list } from '../../utils/api'
var pic = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.ivsky.com%2Fimg%2Ftupian%2Ft%2F201807%2F28%2Fzaoxinggeyidetianpintupian-002.jpg&refer=http%3A%2F%2Fimg.ivsky.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668257571&t=e2aeb541f9aea2bb4e0895234b17f3b7"
export default {
        data () {
                return {
                        list1: ["综合排序", "距离最近", "销量最高", "筛选"],
                        shoplist: [],
                        bannerlist: [],

                }
        },
        methods: {
                // fun (index) {
                //         if (index == 1) {
                //                 this.list.sort((a, b) => {
                //                         return a.distance - b.distance;
                //                 })
                //         } else if (index == 2) {
                //                 this.list.sort((a, b) => {
                //                         return b.sales - a.sales;
                //                 })
                //         }

                // },
                todetail (item) {
                        this.$router.push('/detail/' + item.mtWmPoiId
                        )

                },
                search () {
                        this.$router.push('/search')
                }
        },
        mounted () {
                shop_list().then((ok) => {
                        console.log(ok.data);
                        this.shoplist = ok.data.list;
                }),

                        banner_list().then((ok) => {
                                console.log(ok.data.list);
                                this.bannerlist = ok.data.list;
                        })



        },




}
</script>

<style lang="scss" scoped>
.topa {
        padding: 10px;
        box-sizing: border-box;
        width: 100%;
        background-color: cornflowerblue;
        > input {
                width: 100%;
                height: 40px;
                text-align: center;
                color: #f5f5f5;
                background-color: white;
                border: none;
                outline: none;
                border-radius: 50px;
        }
}

.topb img {
        width: 100%;
        height: 150px;
        padding: 10px;
        box-sizing: border-box;
}

.topc .top3 {
        // display: flex;
        margin: 10px;
        display: flex;
        // justify-content: space-between;
}
.top1 img {
        width: 100px;
        height: 100px;
        margin-right: 20px;
}
.top2 p {
        margin-bottom: 8px;
}
.top2 {
        p:nth-child(1) {
                font-size: 18px;
                font-weight: bold;
                color: red;
        }
        p:nth-child(2) {
                font-size: 14px;
        }
        p:nth-child(3) {
                font-size: 14px;
        }
        p:nth-child(4) {
                font-size: 14px;
        }
}
.top4 {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        > span {
                background-color: #f5f5f5;
                height: 30px;
                width: 20%;
                border-radius: 20px;
                text-align: center;
                line-height: 30px;
        }
}
</style>